
import React, { memo, useEffect } from 'react';
import sty from './sty.module.css';
import cs from 'classnames';

import qs from 'query-string';
import { getCategory, getCategorySongsAction, changeCurrentCategoryAct } from './store/actionCreators';
import SongsHeader from './child/songsHeader';
import SongsList from './child/songsList';
import { useLocation } from 'react-router';
import { useDispatch } from 'react-redux';

const Songs = () => {
  const location = useLocation();
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getCategorySongsAction(1));
    dispatch(getCategory())
    console.log('once');
  }, [dispatch])

  useEffect(() => {
    let { albumName, order } = qs.parse(location.search);
    let name = albumName || location.cat;
    console.log('name', name, order);
    if (name) {
      dispatch(changeCurrentCategoryAct(name, order))
    }
  }, [dispatch, location])
  // ?cat=摇滚&order=hot  discover/songs?albumName=流行&order=hot
  return <div className={cs(sty.songRoot,)}>
    <SongsHeader />
    <SongsList />
  </div>
}
export default memo(Songs)